<template>
  <div class="hello">

<p>监听ref定义的基本数据类型</p>
<h3>当前的求和为：{{ sum }}</h3>
<button @click="changeSum">点击累加sum+1</button>



  </div>
</template>

<script setup>
import {ref,watch} from 'vue'
// 数据
let sum = ref(0)

// 方法
function changeSum() {
  sum.value += 1
}
// 监听
// 实例：使用箭头函数，因为vue3没this这个用法
// watch(sum,(newValue,oldValue) => {
//   监听谁--sum ,(newValue,oldValue)--两个参数，新的值和久的值
// })
// watch(sum,(newValue,oldValue) => {
//   console.log('sum值发生变化了，旧值为：'+oldValue+'，新值为：'+newValue)
// })
// 停止监听
const stopWatch = watch(sum,(newValue,oldValue) => {
  console.log('sum值发生变化了，旧值为：'+oldValue+'，新值为：'+newValue)
  if(newValue > 10){
    stopWatch()
  }
})



</script>

<style scoped>

</style>
